<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            captchaLoad()
        })

        function captchaLoad(){
            $.ajax({
                url:'http://localhost:8080/captchaImage',
                dataType:'json',
                success:function(res){
                    $('#img').attr('src',res.data.img)
                    $('#uuid').val(res.data.uuid)
                }
            })
        }

        function doLogin(){
            var loginInfo = {
                username:$('#username').val(),
                password:$('#password').val(),
                uuid:$('#uuid').val(),
                code:$('#code').val()
            }
            $.ajax({
                type:'post',
                url:'http://localhost:8080/login',
                contentType:'application/json',
                data:JSON.stringify(loginInfo),
                dataType:'json',
                success:function(res){
                    console.log(res)
                    if(res.status != 200){
                        captchaLoad()
                    }else{
                        // 将用户信息存储在localStorage中
                        localStorage.setItem("userInfo", JSON.stringify(res.data))
                        location.href = "main.html"
                    }
                }
            })
        }
    </script>
</head>
<body>
  <div>
    用户名：<input type="text" id="username"> <br>
    密码：<input type="text" id="password"> <br>
    验证码： <input type="text" id="code">
          <img src="" id="img"> <br>
          <input type="hidden" id="uuid">
    <input type="button" value="登录" onclick="doLogin()">
  </div>
</body>
</html>